<template>
  <div ref="content_main" class="content_main">
    <div class="header" ref="header1">
      <van-sticky style="height: 100%">
        <div class="flex justify-content-between top_icon" id="bar">
          <van-icon
            name="arrow-left"
            @click="goPrev"
            :color="scrollShow ? '#000' : '#fff'"
            size="0.158rem"
          />
          <div
            class="top_title"
            :style="{ display: scrollShow ? 'block' : 'none' }"
          >
            {{ doctorInfo.doctorName }}医生
          </div>
        </div>
      </van-sticky>
    </div>
    <div class="cont_main">
      <div class="cont_tip">
        <div class="min_image">
          <img src="../../assets/Avatar.png" />
        </div>
        <div class="cont_name">{{ doctorInfo.doctorName }}</div>
        <div class="cont_gz" @click="watchDoctorFn">
          {{ !focused ? "关注" : "取消关注" }}
        </div>
        <div class="cont_tab">
          <ul>
            <li>{{ doctorInfo.doctorTile }}</li>
            <li>{{ doctorInfo.deptName }}</li>
          </ul>
        </div>
        <div class="cont_hos">
          <div class="con_job">{{ doctorInfo.localHospitalLevel }}</div>
          <div class="con_js">{{ doctorInfo.localHospitalName||doctorInfo.firstWorkUnitName }}</div>
        </div>
        <div class="cont_pf">
          <div class="pf_img" v-if="doctorInfo.averageScore">
            <img src="../../assets/icon_xx.png" />
            <span>4.8</span>
          </div>
          <div class="pf_hp">
            好评率
            <span>96%</span>
          </div>
        </div>
        <div class="cont_js">
          <span>擅长</span>
          {{ doctorInfo.specialty }}
        </div>
        <div v-show="isShow">
          <div class="cont_js">
            <span>简介</span
            >{{doctorInfo.synopsis}}
          </div>
          <div class="cont_js active">
            <span>执业医院</span
            >{{doctorInfo.firstWorkUnitName}}
          </div>
          <p>医疗执业许可登记号：QWP400008765578A899</p>
          <div class="cont_js text-align-center">
            <button>查看医疗许可证</button>
          </div>
        </div>
        <div class="cont_zk" @click="isShow = !isShow">
          {{!isShow?'展开':'收起'}}
          <img :class="!isShow?'active':''" src="../../assets/icon_back.png" />
        </div>
      </div>
    </div>
    <div class="consultation" id="methods1">
      <div class="title">问诊方式</div>
      <div class="consultation_methods">
        <div class="method_item flex">
          <div class="methods_pic item_bg_pink">
            <img src alt />
          </div>
          <div class="method_detail">
            <div class="methods_title">
              图文咨询
              <span>¥{{doctorInfo.pictureConsultationPrice}}/次</span>
            </div>
            <div class="remarks">
              <span>48小时内不限次数沟通</span>
            </div>
          </div>
          <div class="method_action" @click="toOrderFormFn('1')">
            <van-button round color="linear-gradient(to left, #02C0CB, #0ADDA4)"
              >立即咨询</van-button
            >
          </div>
        </div>
        <div class="method_item flex item_space">
          <div class="methods_pic item_bg_blue">
            <img src alt />
          </div>
          <div class="method_detail">
            <div class="methods_title">
              视频咨询
              <span>¥{{doctorInfo.videoConsultationPrice}}/15分钟</span>
            </div>
            <div class="remarks">
              <span>
                计费说明
                <van-icon name="question-o" size="0.14rem" color="#FA6C0C" />
              </span>
            </div>
          </div>
          <div class="method_action" @click="toOrderFormFn('2')">
            <van-button round color="linear-gradient(to left, #02C0CB, #0ADDA4)"
              >立即咨询</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="comments" ref="comments">
      <div class="comments_title flex">
        <div>
          就诊人评价（
          <span>280</span>）
        </div>
        <van-icon name="arrow" size="0.15rem" class="comments_icon" />
      </div>
      <div class="comments_tags">
        <ul>
          <li>性价比高(100)</li>
          <li>服务态度好(90)</li>
          <li>超级满意(50)</li>
          <li>专业度高(40)</li>
        </ul>
      </div>
      <div class="list_box">
        <div class="body_content">
          <div class="content_top">
            <img src="../../assets/icon_people.png" class="comment_user" />
            <div class="content_text">
              <span>k**8</span>
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
            </div>
          </div>
          <div class="content_body">
            非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
          </div>
          <div class="content_foot">
            <div class="foot_text">图文问诊</div>
            <div class="foot_data">2020-09-09 13:20:09</div>
          </div>
        </div>
        <div class="body_content">
          <div class="content_top">
            <img src="../../assets/icon_people.png" class="comment_user" />
            <div class="content_text">
              <span>k**8</span>
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
            </div>
          </div>
          <div class="content_body">
            非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
          </div>
          <div class="content_foot">
            <div class="foot_text">视频问诊</div>
            <div class="foot_data">2020-09-09 13:20:09</div>
          </div>
        </div>
        <div class="body_content">
          <div class="content_top">
            <img src="../../assets/icon_people.png" class="comment_user" />
            <div class="content_text">
              <span>k**8</span>
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
              <img src="../../assets/icon_star.png" />
            </div>
          </div>
          <div class="content_body">
            非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
          </div>
          <div class="content_foot">
            <div class="foot_text">图文问诊</div>
            <div class="foot_data">2020-09-09 13:20:09</div>
          </div>
        </div>
      </div>
      <div class="buttons_group" v-show="methodsShow">
        <van-button
          round
          @click="toOrderFormFn('1')"
          color="linear-gradient(to left, #02C0CB, #0ADDC3)"
          size="large"
          >图文¥{{doctorInfo.pictureConsultationPrice}}/次</van-button
        >
        <div style="width: 0.22rem"></div>
        <van-button
          round
          @click="toOrderFormFn('2')"
          color="linear-gradient(to left, #68AFFF, #2DA4FF)"
          size="large"
          >视频¥{{doctorInfo.videoConsultationPrice}}/15分钟</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { watchDoctor } from "@/api/index";
import { Icon, Button, Sticky } from "vant";
import { doctorDetail } from "@/api/doctors";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
  },
  data() {
    return {
      scrollShow: false,
      methodsShow: false,
      focused: false,
      order: "",
      doctorInfo: {},
      isShow: false,
    };
  },
  created() {
    let order = localStorage.order;
    if (order) {
      order = JSON.parse(order);
      this.order = order;
    }
    this.doctorDetailFn();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    goPrev(){
      this.$router.go(-1);
    },
    doctorDetailFn() {
      const doctorId = {
        doctorId: this.order.id,
      };
      doctorDetail(doctorId).then((res) => {
        this.focused = res.body.focused;
        this.doctorInfo = res.body.doctorInfo;
        console.log(res);
      });
    },
    toOrderFormFn(item) {
      console.log(item)
      let obj = this.order;
      obj.type = item;
      localStorage.setItem("order", JSON.stringify(obj));
      this.$router.push("/order");
    },
    watchDoctorFn() {
      // 关注
      const obj = {
        doctorId: "1324615396332982300",
        status: this.focused,
        userId: "1324615396332982300",
      };
      watchDoctor(obj).then((res) => {
        if (res.body) {
          this.focused = res.body;
        }
      });
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let topElement = document.getElementById(`bar`);
      let methodsElement = document.getElementById(`methods1`);
      let offsetTop = this.$refs.header1.clientHeight;
      let comments = this.$refs.comments.offsetTop;
      if (scrollTop > offsetTop) {
        topElement.classList.add("scroll_top");
        this.scrollShow = true;
      } else {
        topElement.classList.remove("scroll_top");
        this.scrollShow = false;
      }
      if (scrollTop + offsetTop > comments) {
        this.methodsShow = true;
      } else {
        this.methodsShow = false;
      }
    },
  },
};
</script>

<style scoped>
.content_main {
  height: 100%;
  /* overflow-y: auto; */
  background: #f7f7f7;
  line-height: 0.2rem;
}
.scroll_top {
  background-color: #fff;
  border-bottom: 1px solid #f8f8f8;
}
.top_title {
  font-size: 0.18rem;
}
.item_space {
  margin-top: 0.3rem;
}
.item_bg_pink {
  background: linear-gradient(#ffaba5, #fe8d85);
}
.item_bg_blue {
  background: linear-gradient(#98e5ff, #4ccaf4);
}
.buttons_group {
  font-size: 0.15rem;
  display: flex;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 0.15rem;
}
.buttons_group >>> .van-button--large {
  height: 0.5rem;
}
</style>
<style lang="less" scoped>
.header {
  background: url("../../assets/doctor_top.png") no-repeat top;
  height: 0.88rem;
  .top_icon {
    padding: 0 0.15rem;
    height: 0.44rem;
    align-items: center;
  }
}
.cont_main {
  background: #fff;
  position: relative;
  top: -0.1rem;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  .min_image {
    width: 0.6rem;
    min-width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    top: -0.4rem;
    right: 0.25rem;
    border-radius: 50%;
    overflow: hidden;
    img {
      vertical-align: top;
      width: 100%;
    }
  }
  .cont_tip {
    padding: 0.15rem;
    position: relative;
    .cont_name {
      font-size: 0.25rem;
      display: block;
    }
    .cont_gz {
      display: flex;
      margin-right: 0.1rem;
      margin-top: 0.1rem;
      width: 0.6rem;
      height: 0.27rem;
      border-radius: 0.27rem;
      border: 1px solid #35d4bf;
      color: #35d4bf;
      font-size: 0.14rem;
      margin-left: auto;
      justify-content: center;
      align-items: center;
    }
    .cont_tab {
      margin-bottom: 0.1rem;
      ul {
        li {
          width: 0.68rem;
          height: 0.29rem;
          line-height: 0.29rem;
          background: #f5f5f5;
          border-radius: 0.02rem;
          margin-right: 0.1rem;
          text-align: center;
          display: inline-block;
        }
      }
    }
    .cont_hos {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.11rem;
      .con_job {
        width: 0.4rem;
        font-size: 0.11rem;
        background: #f7b500;
        color: #fff;
        border-radius: 0.02rem;
        text-align: center;
      }
      .con_js {
        flex: 1;
        padding-left: 0.06rem;
      }
    }
    .cont_pf {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.1rem;
      .pf_img {
        margin-right: 0.73rem;
        img {
          width: 0.18rem;
        }
        span {
          font-size: 0.2rem;
          padding-left: 0.05rem;
          color: #f7b500;
        }
      }
      .pf_hp {
        flex: 1;
        font-size: 0.13rem;
        
        span {
          font-size: 0.2rem;
          padding-left: 0.05rem;
          color: #f7b500;
        }
      }
    }
    p{
      margin-bottom: 0.16rem;
    }
    .cont_js.active{
      margin-bottom: 0.06rem;
    }
    .cont_js {
      font-size: 0.13rem;
      margin-bottom: 0.15rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      span {
        padding-right: 0.1rem;
        color: #35d4bf;
      }
      button{
        width: 1.32rem;
        text-align: center;
        height: 0.27rem;
        font-size: 0.13rem;
        border:1px solid #08D6C6;
        color: #08D6C6;
        background: #fff;
        border-radius: 0.13rem;
      }
    }
    .cont_zk {
      text-align: center;
      font-size: 0.12rem;
      img {
        width: 0.1rem;
        padding-left: 0.07rem;
      }
      img.active{
        transform: rotate(-180deg);
      }
    }
  }
}
.consultation {
  height: 203px;
  margin-bottom: 0.1rem;
  background-color: #fff;
  .title {
    font-size: 0.18rem;
    margin-left: 0.15rem;
    padding-top: 0.2rem;
  }
  .consultation_methods {
    padding: 0.2rem 0.15rem;
    .method_item {
      .methods_pic {
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 0.2rem;
      }
      .method_detail {
        margin-left: 0.1rem;
        .methods_title {
          font-size: 0.16rem;
          span {
            font-size: 0.12rem;
            margin-left: 0.1rem;
          }
        }
      }
      .method_action {
        margin-right: 0;
        margin-left: auto;
      }
    }
  }
}
.comments {
  background-color: #fff;
  padding: 0.2rem 0.15rem;
  padding-bottom: 0;
  height: calc(100% - 0.54rem);
  overflow: hidden;
  .comments_title {
    font-size: 0.18rem;
  }
  .comments_icon {
    margin-right: 0;
    margin-left: auto;
    padding-top: 0.05rem;
  }
  .comments_tags {
    margin-bottom: 0.2rem;
    ul {
      li {
        width: 1rem;
        height: 0.29rem;
        line-height: 0.29rem;
        background: #f5f5f5;
        margin-right: 0.1rem;
        margin-top: 0.1rem;
        text-align: center;
        display: inline-block;
      }
    }
  }
  .list_box {
    height: calc(100% - 1.78rem);
    overflow-y: auto;
    .body_content {
      padding-top: 0.15rem;
      border-bottom: 0.005rem solid rgba(234, 233, 233, 1);
      .content_top {
        display: flex;
        margin-bottom: 0.1rem;
        .comment_user {
          width: 0.4rem;
          height: 0.4rem;
        }
        .content_text {
          padding-left: 0.1rem;
          span {
            font-size: 0.13rem;
            display: block;
          }
          img {
            width: 0.1rem;
          }
        }
      }
      .content_body {
        font-size: 0.13rem;
        color: #666;
        margin-bottom: 0.1rem;
      }
      .content_foot {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.16rem;
        .foot_text {
          width: 0.63rem;
          background: #f5f5f5;
          text-align: center;
          color: #666;
        }
        .foot_data {
          color: #999;
        }
      }
    }
  }
}
</style>
